<template>
	<div class="my-volume-library"  v-loading.fullscreen.lock="loading"
		element-loading-text="拼命加载中">

		<div class="question-bank-h-box">
			<div class="question-bank-h-path">
				<router-link to="/test/common-library">公共卷库</router-link>
				<router-link to="/test/private-library">我的卷库</router-link>
			</div>

			<ul class="question-bank-h-type">

				<li class="question-bank-h-list">
					<span>试卷类型:</span>
					<div>
						<template>
						  <el-radio-group v-model="question.type" @change="getTestList">
						  	<template v-for="item of getTestTypeList">
						  		<el-radio :label="item.id">{{item.name}}</el-radio>
						  	</template>
						  </el-radio-group>
						</template>
					</div>
				</li>

				<li class="question-bank-h-list">
					<span>试卷范围:</span>
					<div class="question-area">
                        <testArea ref="testArea"></testArea>
						<el-button type="primary" @click="screenChange()">筛选</el-button>
						<el-button type="primary" plain @click="restChange()">重置</el-button>
					</div>
				</li>

			</ul>
		</div>	
		
		<div class="common-volume-library">
			
			<div class="question-bank-wp-r-h">
				<el-input
				    placeholder="搜索试卷"
				    suffix-icon="el-icon-search"
				     v-model="question.keyword" @change="getTestList">
				  </el-input>

				  <div>
					  	<el-radio-group v-model="question.order" @change="getTestList">
					  		<el-radio label="time">最新<i class="el-icon-sort-down"></i></el-radio>
					  		<el-radio label="fav">热门<i class="el-icon-sort-down"></i></el-radio>
					  	</el-radio-group>
				  </div>
			</div>

			<ul>
				<template  v-for="(item, index) of testList">
				 <transition name="el-zoom-in-top">
					<li class="common-volume-ls my-common-volume"  :key="index">
						<span></span>
						<div class="">
							
							<div class="common-volume-ls-title">
								<router-link  :to="{path: '/test/test-paper', query: {id: item.id, authority: 2}}">{{item.name}}</router-link>
								<span>更新于：{{item.update_time.substring(0, 16)}}</span>
							</div>
							<div class="common-volume-ls-tag">
								<span v-if="item.study_section">{{item.study_section}}</span>
								<span v-if="item.subject">{{item.subject}}</span>
								<span v-if="item.source">{{item.source}}</span>
								<span v-if="item.version_name">{{item.version_name}}</span>
							</div>
							<div class="common-volume-ls-state">

								<span v-if="item.authority == 1 && item.status == 1" class="library-1">已公开</span>
								<span v-if="item.authority == 0" class="library-3">未公开</span>
								<span v-if="item.status == 2" class="library-2">不通过</span>
								<span v-if="item.status == 3 && item.authority == 1" class="library-4">审核中</span>
								<!-- <span v-if="item.status == 1" class="library-5">已编辑</span> -->
							</div>
							<div class="common-volume-ls-op">
								<span  v-if="item.authority == 1 && item.status !== 2" @click.stop="operationTest(1, item.id)">撤销公开</span>
								<span v-if="item.status == 2" @click.stop="operationTest(2, item.id)">重新申请</span>
								<span v-if="item.authority == 0" @click.stop="operationTest(3, item.id)">设为公开</span>
								<span @click.stop="operationTest(4, item.id)">预览试卷</span>
								<!-- <span @click.stop="operationTest(5, item.id)">编辑</span> -->
								<a @click.stop="copyTest(item)" class="accordion-edit">编辑</a>
								<span @click.stop="operationTest(6, item.id)">复制试卷</span>
								<span @click.stop="operationTest(7, item.id)">删除试卷</span>
							</div>
						</div>
					</li>
				</transition>
				</template>
			</ul>

			<div class="dependent" v-if="placeholder">
			    <i class="ipng image_state01"></i>
			    <p>还没发现任何相关的内容哦~</p>
			</div>


			<el-pagination class="test-pagination" v-show=" question.total > 10"
				@size-change="sizeChange"
				@current-change="currentChange"
				:current-page="question.page"
				:page-sizes="[10, 50, 100, 200, 300, 400]"
				:page-size="question.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="question.total">
			</el-pagination>

		</div>

	</div>
</template>

<script>
    import testArea  from  './test-area';
	
	export default {
		components: { 
            testArea
        },               
		data(){
			return {
				loading: true,
				placeholder: false,
				question: {
					type: 0, 		/*试题类型*/
					order: 'time',			/*列表排序*/
					keyword: '', 		/*搜索关键字*/
					page: 1,
					size: 10,
					total: 0
				},
				activeName: 'first',
				testList: [], 		/*试卷列表*/
				getTestTypeList: [],

				editTestList: [],
				headClassList: null,
				copy: '',
			}
		},
		watch: {
			'$store.state.questionChange': {
				handler(val, newval){
                    this.$nextTick(()=>{
                        this.$refs.testArea.subjectData = deep_clone(this.$parent.subjectArr);
                        let subject = this.$route.query.subject ? this.$route.query.subject : sessionStorage.getItem('subjectID');
                        this.$refs.testArea.ruleForm.subject = subject === '0' ? '' : +subject;
                        this.getTestList();
                    })
				},
				immediate: true
			},            
		},
		created(){
            this.getTestType();
		},
		mounted(){
			this.headClassList = document.querySelector('.library').classList;
			this.headClassList.add('showActive')
		},
		destroyed(){
			this.headClassList.remove('showActive')
		},
		methods: {
			copyTest(obj){
				let success = (res)=>{
					this.$router.push({path: '/test/knowledge-points', query: {edit: res.data,points: 1, copy: obj.id}})
				};
				let data = {id: obj.id}
				this.$ajax.post('api/newtest/copy_test', data, {func: {success: success}});
			},
			/**
			 * 重置数据
			 * @DateTime 2020-06-09T17:10:01+0800
			 * @qiu_m
			 * @return   {[type]}                 [description]
			 */
			restChange(){
                this.$refs.testArea.setDefault();
				this.question.page = 1
				this.getTestList()
			},
			/**
			 * 筛选
			 * @qiu_m
			 * @DateTime 2019-11-16T11:53:17+0800
			 * @return   {[type]}                 [description]
			 */
			screenChange(){
                let noSelect = Object.values(this.$refs.testArea.ruleForm).includes('');
				if (noSelect) {
					this.chapterID = [];
					this.knowledgeID = [];
				}
				this.getTestList()
			},

			/**
			 * 请求试卷列表
			 * @DateTime 2019-07-22T13:47:02+0800
			 */
			getTestList(){
				let success = ( res=>{
					this.testList = res.data.data;
					this.question.page = parseInt(res.data.page_index);
					this.question.total  = parseInt(res.data.data_sum);
                    this.loading = false;
					this.testList.length != 0 ? this.placeholder = false : this.placeholder = true;
				});

				let params = {
					user_id: this.$g.user_id,
					page_index: this.question.page,
                    page_size: this.question.size,
                    
                    grade_id: this.$refs.testArea.ruleForm.grade,
                    subject_id: this.$refs.testArea.ruleForm.subject,
                    version_id: this.$refs.testArea.ruleForm.edition,
                    masterial_id: this.$refs.testArea.ruleForm.material,     

					keyword: this.question.keyword,
					order: this.question.order,
					source_id: this.question.type,
					status:  '1,2,3'
				};

				this.$ajax({
					url: 'api/newtest/test_list',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/**
			 * 请求试题类型数据
			 * @DateTime 2019-07-25T14:09:13+0800
			 * @return   {[type]}                 [description]
			 */
			getTestType(){
				let success = (res=>{
					this.getTestTypeList = res.data;
					if (this.getTestTypeList.length > 0) {
						this.getTestTypeList.unshift({id:0, name: '全部'})
					}
				});

				let params = {status: 1};

				this.$ajax({
					url: 'api/newtest/get_test_type',
					method: 'get',
					params: params,
					func: { success: success}
				})
			},
			handleClick(tab, event) {
				// console.log(tab, event);
			},
			sizeChange(val) {
				this.question.size = val
				this.getTestList()
			},
			currentChange(val) {
				document.documentElement.scrollTop = 0;
				this.question.page = val
				this.getTestList()
			},
			/**
			 * type 参数对应不同的函数，
			 *
			 * 1.设置对应的试题是否 撤销公开
			 * 2.设置对应的试题是否 重新申请
			 * 3.设置对应的试题是否 设为公开
			 * 4.设置对应的试题进行 预览试卷
			 * 5.设置对应的试题是否 编辑
			 * 6.设置对应的试题进行 复制试卷
			 * 7. 设置对应的试题是否 除试卷
			 * @return {[type]} [description]
			 */
			operationTest(type, id) {
				
				switch(type){
					case 1:
						this.$confirm('是否撤销？', '撤销公开', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							let success = ( res=>{
								this.$message.success(res.msg);
								this.getTestList()
							});

							let params = {
								create_id: this.$g.user_id,
								id: id,
								status: 1,
								authority: 0,
							};

							this.$ajax({
								url: 'api/newtest/save_test',
								method: 'put',
								data: params,
								func: {success: success}
							})
						}).catch(() => {});
						break;
					case 2:

						this.$confirm('是否重新申请？', '重新申请', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {

							let success = ( res=>{
								this.$message.success(res.msg);
								this.getTestList()
							});

							let params = {
								create_id: this.$g.user_id,
								id: id,
								status: 3,
								authority: 1,
							};

							this.$ajax({
								url: 'api/newtest/save_test',
								method: 'put',
								data: params,
								func: {success: success}
							})
							
						}).catch(() => {});
						break;
					case 3:
						this.$confirm('是否设为公开？', '设为公开', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							let success = ( res=>{
								this.$message.success(res.msg);
								this.getTestList()
							});

							let params = {
								create_id: this.$g.user_id,
								id: id,
								status: 3,
								authority: 1,
							};

							this.$ajax({
								url: 'api/newtest/save_test',
								method: 'put',
								data: params,
								func: {success: success}
							})
						}).catch(() => {});
						break;
					case 4:
						this.$router.push({path: '/test/test-paper', query: {id: id, authority: 2}})

						/*this.$confirm('是否预览试卷？', '预览试卷', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
					
							
						}).catch(() => {});*/
						break;
					case 5:
						this.$confirm('是否编辑？', '编辑', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}).catch(() => {});
						break;
					case 6:
						this.$confirm('是否复制试卷？', '复制试卷', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							
							let success = (res=>{
								this.$message.success(res.msg)
								this.getTestList()
							});
							let data = {id: id};
							this.$ajax.post('api/newtest/fav_test', data, {func: {success: success}});

						}).catch(() => {});
						break;
					case 7:
						this.$confirm('是否删除试卷？', '删除试卷', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {

							let success = ( res=>{
								this.$message.success(res.msg);
								this.question.page = 1
								this.getTestList()
							});

							let params = {
								id: id,
								status: 0
							};

							this.$ajax({
								url: 'api/newtest/save_test',
								method: 'put',
								data: params,
								func: {success: success}
							})

						}).catch(() => {});
						break;
				}

				
			},
			
			
		}

	}
</script>